<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs项目</title>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<div class="container table-bordered table-hover table-responsive" id="demoIndex">
    <table class="table">
        <caption>
            VueJs项目
        </caption>
        <thead>
        <tr>
            <th>项目</th>
            <th>名称</th>
        </tr>
        </thead>
        <tr v-for="value in objectArr">
            <td>{{value.demoName}}</td>
            <td v-html="value.srcName"></td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var indexDemo = new Vue({
        el: "#demoIndex",
        data: {
            objectArr: [
                {demoName: "项目2模板语法-Html",srcName: `<a href="case2-VueJs模板语法/demo2-Html.html">Html</a>`},
                {demoName: "项目2模板语法-Cloak",srcName: `<a href="case2-VueJs模板语法/demo3-cloak.html">Clock</a>`},
                {demoName: "项目2模板语法-用户输入",srcName: `<a href="case2-VueJs模板语法/demo7-用户输入/demo7-双向数据绑定.html">双向数据绑定</a>`},
                {demoName: "项目2模板语法-用户输入",srcName: `<a href="case2-VueJs模板语法/demo7-用户输入/demo7-双向数据绑定-select.html">双向数据绑定:select</a>`},
                {demoName: "项目2模板语法-用户输入",srcName: `<a href="case2-VueJs模板语法/demo7-用户输入/demo7-双向数据绑定-checkbox.html">双向数据绑定:checkbox</a>`},
                {demoName: "项目2模板语法-用户输入",srcName: `<a href="case2-VueJs模板语法/demo7-用户输入/demo7-字符串反转.html">字符串反转</a>`},

                {demoName: "项目3循环语句-对象",srcName: `<a href="case3-循环语句/demo1-循环语句/demo1-循环语句-对象.html">循环语句-对象</a>`},
                {demoName: "项目3循环语句-数组",srcName: `<a href="case3-循环语句/demo1-循环语句/demo1-循环语句-数组.html">循环语句-数组</a>`},
                {demoName: "项目3循环语句-迭代",srcName: `<a href="case3-循环语句/demo2-迭代对象/demo2-迭代对象1.html">循环迭代对象一个</a>`},
                {demoName: "项目3循环语句-迭代",srcName: `<a href="case3-循环语句/demo2-迭代对象/demo2-迭代对象2.html">循环迭代对象两个</a>`},
                {demoName: "项目3循环语句-迭代",srcName: `<a href="case3-循环语句/demo3-迭代整数.html">循环迭代整数</a>`},

                {demoName: "项目4事件处理器-事件修饰符",srcName: `<a href="case4-事件处理器/demo2-事件修饰符/demo2-冒泡-阻止单击事件冒泡%20.html">冒泡-阻止单击事件冒泡</a>`},
                {demoName: "项目4事件处理器-事件修饰符",srcName: `<a href="case4-事件处理器/demo2-事件修饰符/demo2-冒泡-阻止提交默认事件不再重载页面.html">冒泡-阻止提交默认事件不再重载页面</a>`},
                {demoName: "项目4事件处理器",srcName: `<a href="case4-事件处理器/demo3-按键修饰符.html">按键修饰符</a>`},

                {demoName: "项目5条件语句",srcName: `<a href="case5-条件语句/demo1-v-if.html">v-if</a>`},
                {demoName: "项目5条件语句",srcName: `<a href="case5-条件语句/demo4-v-show.html">v-show</a>`},

                {demoName: "项目6样式绑定-class属性绑定",srcName: `<a href="case6-样式绑定/demo1-class属性绑定/demo1-class属性绑定-1.html">class属性绑定-1</a>`},
                {demoName: "项目6样式绑定-class属性绑定",srcName: `<a href="case6-样式绑定/demo1-class属性绑定/demo1-class属性绑定-2.html">class属性绑定-2</a>`},
                {demoName: "项目6样式绑定-class属性绑定",srcName: `<a href="case6-样式绑定/demo1-class属性绑定/demo1-class属性绑定-3.html">class属性绑定-3</a>`},
                {demoName: "项目6样式绑定-Vue.js style（内联样式）",srcName: `<a href="case6-样式绑定/demo3-Vue.jsStyle(内联样式)/demo3-Vuejs-style1.html">Vuejs-style1</a>`},
                {demoName: "项目6样式绑定-Vue.js style（内联样式）",srcName: `<a href="case6-样式绑定/demo3-Vue.jsStyle(内联样式)/demo3-Vuejs-style2.html">Vuejs-style2</a>`},
                {demoName: "项目6样式绑定",srcName: `<a href="case6-样式绑定/demo4-vuejs-src.html">Vuejs-src</a>`},

                {demoName: "项目8-Ajax.js(axios)",srcName: `<a href="case8-Vue.js-Ajax(axios)/demo1-get实例/demo1-get1.html">ajax(axios)-get1</a>`},
                {demoName: "项目8-Ajax.js(axios)",srcName: `<a href="case8-Vue.js-Ajax(axios)/demo1-get实例/demo1-get2.html">ajax(axios)-get2-koa</a>`},

                {demoName: "项目1-3小综合",srcName: `<a href=\"general/case1-case3/general-demo.html\">项目小综合1</a>`},
                {demoName: "项目1-3小综合",srcName: `<a href="general/case1-case3/general-demo2.html">项目小综合2</a>`},

                ]
        }
    })
</script>
</body>
</html>